<template>
  <div>
    <div class="search-con search-con-top">
      设计项目：
      <Input v-model="searchData.name" style="width: 200px"></Input>

      <Button @click="search" type="primary" icon="ios-search" style="margin-left: 10px;">搜索</Button>
      <Button @click="reset()" style="margin-left: 10px;">重置</Button>
      <Button slot="extra" @click="showDrawer(false)" type="warning" style="margin-left: 10px;">添加</Button>
    </div>
    <br>
    <Table :columns="columns" :data="list" @on-sort-change="customSort" :highlight-row="true" max-height="800" border
      stripe>
      <template slot-scope="{ row , index}" slot="memberSlot">
        <Tooltip content="编辑" style="margin-left: 10px;" placement="top">
          <Icon type="ios-create" size="24" color="#2d8cf0" style="cursor: pointer;" @click="showDrawer(row)" />
        </Tooltip>
        <Tooltip content="删除" style="margin-left: 10px;" placement="top">
          <Icon type="md-trash" size="24" color="#ed4014" style="cursor: pointer;" @click.stop="del(row.id)" />
        </Tooltip>
      </template>
    </Table>
    <Paginate :total="total" @on-change="changePage" @on-page-size-change="changeSize">
    </Paginate>
    <Drawer :title="itemInfo.id == 0 ? '添加' : '编辑'" :closable="false" width="40" v-model="showAdd">
      <Form ref="formValidate" :model="itemInfo" :label-width="100">

        <FormItem label="名称">
          <Input v-model="itemInfo.name" placeholder=""></Input>
        </FormItem>
        <!-- <FormItem label="缩略图" prop="goods_icon" class="item">
            <Upload ref="upload" name="image" :action="action_url" :show-upload-list="false" :headers="header"
              :format="['jpg', 'jpeg', 'png']" :on-format-error="handleFormatError" :on-success="handleSuccess">
              <Button icon="ios-cloud-upload-outline">点击上传</Button>
            </Upload>
          </FormItem>
          <FormItem class="item">
            <img :src="baseImgeUrl + itemInfo.img" style="width: 200px;height: 200px;" v-show="itemInfo.img != ''">
          </FormItem>
          <FormItem label="排序值">
            <Input v-model="itemInfo.sort" placeholder="从大到小排序" type="number"></Input>
            <Alert type="error">排序值越大 显示在最前边</Alert>
          </FormItem> -->
        <FormItem>
          <Button type="primary" @click="submit">提交</Button>
        </FormItem>
      </Form>
    </Drawer>
  </div>
</template>
  
<script>
import config from "@/config";
import Paginate from "@/components/paginate/paginate.vue";
import { getToken } from "../../libs/util";
const baseUrl = process.env.NODE_ENV === "development" ? config.baseUrl.dev : config.baseUrl.pro;
const baseImgeUrl = process.env.NODE_ENV === "development" ? config.baseImgUrl.dev : config.baseImgUrl.pro;
export default {
  name: "typeProgram",
  components: {
    Paginate,
  },
  data() {
    return {
      baseImgeUrl: baseImgeUrl,
      action_url: baseUrl + "/admin/image/uploadImg",
      header: { Authorization: getToken() },
      imgUrl: '',
      // 列表
      columns: [
        {
          title: 'ID',
          align: "center",
          key: 'id',
          sortable: 'custom',
        },
        // {
        //   title: '图片',
        //   align: "center",
        //   key: 'goods_img',
        //   render: (h, param) => {
        //     return h("img", {
        //       attrs: {
        //         src: baseImgeUrl + param.row.img
        //       },
        //       style: {
        //         width: '80px',
        //         height: '60px'
        //       }
        //     });
        //   }
        // },
        {
          title: '名称',
          align: "center",
          key: 'name',
          sortable: 'custom',
        },
        // {
        //   title: '上级分类',
        //   align: "center",
        //   key: 'ptitle',
        //   sortable: 'custom',
        // },
        // {
        //   title: '排序值',
        //   align: "center",
        //   key: 'sort',
        //   sortable: 'custom',
        // },
        {
          title: '创建时间',
          align: "center",
          key: 'create_time',
          sortable: 'custom',
        },
        {
          title: '操作',
          align: "center",
          key: 'make',
          slot: 'memberSlot',
          minWidth: 100,
        },
      ],
      // 数据
      list: [],
      total: 0,
      searchData: {
        page: 1,
        limit: 10,
      },
      showAdd: false,
      cateList: [],
      // 管理信息
      itemInfo: {},
    }
  },
  methods: {
    getList() {
      const param = {
        ...this.searchData
      };
      this.$axios('/admin/program/getList', param).then(res => {
        this.list = res.data;
        this.total = res.total;
      });
    },
    search() {
      this.searchData.page = 1;
      this.getList();
    },
    reset() {
      this.searchData = {
        page: 1,
        limit: 10,
      };
      this.getList();
    },
    changePage(page) {
      this.searchData.page = page;
      this.getList();
    },
    changeSize(size) {
      this.searchData.limit = size;
      this.getList();
    },
    customSort(column, key, order) {
      this.searchData.order_by = column.key;
      this.searchData.sort = column.order;
      this.getList();
    },
    // 显示添加角色弹窗
    showDrawer(row) {
      // this.getCategoryArr();
      if (row) {
        this.itemInfo.id = row.id;
        this.itemInfo.name = row.name;
      } else {
        this.itemInfo = {
          id: 0,
          name: "",
        };
      }
      this.showAdd = true;
    },
    // 添加角色
    submit() {
      this.$axios('/admin/program/save', this.itemInfo).then(res => {
        this.$Message.success('保存成功');
        this.showAdd = false;
        this.getList();
      })
    },
    handleSuccess(res, file) {
      this.itemInfo.img = res.data;
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: "文件格式错误",
        desc: "不支持该文件类型",
      });
    },
    del(id) {
      this.$axios('/admin/program/del', { id: id }).then(res => {
        this.$Message.success('删除成功');
        this.getList();
      })
    },
    getCategoryArr() {
      this.$axios('/admin/category/getCategoryArr', {}).then(res => {
        this.cateList = res;
      })
    }
  },
  created() {
    // 查询自己管理员
    this.getList();
  }
}
</script>
  
<style>
.inputMaxWidth {
  max-width: 180px;
  margin-left: 10px;
}
</style>
  